<route lang="yaml">
meta:
  title: 豆包语音服务
</route>

<script lang="ts" setup>
import { saveCacheFromObject } from '@/utils/fs'
import {ElNotification} from "element-plus";

const douBaoVoiceConfig = ref({
  appid: '',
  accessToken: '',
  resourceId: '',
})

onMounted(() => {
  const cacheConfig = localStorage.douBaoVoiceConfig
  if (cacheConfig) {
    const config = JSON.parse(cacheConfig)
    console.log(config)
    douBaoVoiceConfig.value.appid = config.appid
    douBaoVoiceConfig.value.accessToken = config.accessToken
    douBaoVoiceConfig.value.resourceId = config.resourceId
  }
})

function saveConfig() {
  saveCacheFromObject('douBaoVoiceConfig', douBaoVoiceConfig.value)
  localStorage.setItem('douBaoVoiceAppId', douBaoVoiceConfig.value.appid)
  localStorage.setItem('douBaoVoiceAccessToken', douBaoVoiceConfig.value.accessToken)
  localStorage.setItem('douBaoVoiceResourceId', douBaoVoiceConfig.value.resourceId)
}

function clearConfig() {
  douBaoVoiceConfig.value = { appid: '', accessToken: '' , resourceId:  ''}
  ElNotification({
    title: '操作成功',
    message: '配置已清空',
    type: 'success',
  })
}

</script>

<template>
  <div>
    <FaPageHeader>
      <template #title>
        <div class="flex items-center gap-4">
          豆包语音大模型配置
        </div>
      </template>
      <template #description>
        <div class="text-sm/6">
          <div>
            功能：使用豆包语音大模型服务，其中包含语音大模型生成等语音服务。详情点击：https://console.volcengine.com/ark/region:ark+cn-beijing/experience/voice?type=SI
          </div>
        </div>
      </template>
    </FaPageHeader>
    <FaPageMain>
      <el-form :model="douBaoVoiceConfig" label-width="auto" size="large">
        <el-form-item label="appid">
          <el-input v-model="douBaoVoiceConfig.appid" style="max-width: 600px;" />
        </el-form-item>
        <el-form-item label="accessToken">
          <el-input v-model="douBaoVoiceConfig.accessToken" style="max-width: 600px;" />
        </el-form-item>
        <el-form-item label="resourceId">
          <el-input v-model="douBaoVoiceConfig.resourceId" style="max-width: 600px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveConfig">
            保存配置
          </el-button>
          <el-button type="danger" @click="clearConfig">
            重置配置
          </el-button>
        </el-form-item>
      </el-form>
    </FaPageMain>
  </div>
</template>
